<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- 载入文章头部页面，位置在/client文件夹下的header模板页面，模板名称th:fragment为header -->
<div th:replace="/client/header::header('Fish Memory',null)"/>
<body>

<div class="main-container" style="margin-left: 0px;margin-right: 0px;">
    <div class="padding-md">
        <h3 class="header-text m-top-lg">
            Welcome To My Site
        </h3>

        <div class="row" style="padding-left: 15px;padding-right: 15px;">
            <div class="col-sm-4 col-md-3">
                <div class="user-profile-pic">
                    <img th:src="@{/head.jpg}" alt="">
                </div>
                <div class="user-name m-top-sm">应程鹏<i class="fa fa-circle text-success m-left-xs font-14"></i></div>

                <div class="m-top-sm">
                    <div>
                        <i class="fa fa-map-marker user-profile-icon"></i>
                        杭州市,浙江省,中国
                    </div>

                    <div class="m-top-xs">
                        <i class="fa fa-briefcase user-profile-icon"></i>
                        Software Engineer
                    </div>

                    <div class="m-top-xs">
                        <i class="fa fa-external-link user-profile-icon"></i>
                        <a href="https://www.yingchengpeng.com">www.yingchengpeng.com</a>
                    </div>
                </div>

                <h4 class="m-top-md m-bottom-sm">About Me</h4>
                <p class="m-top-sm">
                    简单的自我介绍，此处省略N字.
                <p>
            </div>
            <div class="col-md-8">
                <div class="blog-wrapper" th:each="article : ${page}">
                    <!-- 文章遍历并分页展示 : 需要同学们手动完成，基本样式已经给出，请使用th标签及表达式完成页面展示 -->
                    <div class="blog-list">
                        <div class="blog-header clearfix m-bottom-md">
                            <div class="blog-date">
                                <div th:text="${#dates.format(article.createdAt, 'dd')}"></div>
                                <div class="blog-month" th:text="${#dates.format(article.createdAt, 'MM')}"></div>
                            </div>

                            <div class="blog-title">
                                <div class="text-upper"><a th:text="${article.title}"></a></div>
                                <div class="text-muted font-12">
                                    By <a href="#" th:text="${article.author}"></a>
                                    in <a href="#" th:text="${article.categoryName}"></a>
                                </div>
                            </div>
                        </div><!-- ./blog-header -->

                        <p class="m-top-lg" th:text="${article.synopsis}"></p>

                        <div class="m-top-md text-right" style="padding-right: 20px;">
                            <a href="#" class="text-upper">More</a>
                        </div>
                    </div><!-- ./blog-list -->
                </div>

                <div th:replace="/client/pagination::pagination(${pageNo}, ${pageSize}, ${page.getTotalPages()}, '/index', '')"/>
            </div><!-- ./blog-wrapper -->
        </div>

    </div><!-- ./padding-md -->
</div><!-- /main-container -->

</body>
<!-- 载入文章尾部页面，位置在/client文件夹下的footer模板页面，模板名称th:fragment为footer -->
<div th:replace="/client/footer::footer"/>
</html>
